<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 
<script type="text/javascript">
$(function(){
 
    // Dialog
    $('.dialog').dialog({
        autoOpen: false,
        width: 600,
        buttons: {
        "Ok": function() {
        $(this).dialog("close");
        },
        "Cancel": function() {
        $(this).dialog("close");
        }
        }
    });
 
    // Dialog Link
    $('.dialog_link').click(function(){
 
    $('.dialog').dialog('close');
 
    var id_link = $(this).attr('id');
    var index = id_link.split('_');
 
    $('#txt_'+index[1]).dialog('open');
 
    return false;
 
    });
 
    //hover states on the static widgets
    $('.dialog_link, ul.icons li').hover(
    function() { $(this).addClass('ui-state-hover'); },
    function() { $(this).removeClass('ui-state-hover'); }
    );
 
});
</script>
<style type="text/css">
 
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
 
.dialog_link
            {
              padding: .4em 1em .4em 20px;
              text-decoration: none;position: relative;
            }
 
.dialog_link span.ui-icon
            {
               margin: 0 5px 0 0;position: absolute;
               left: .2em;top: 50%;margin-top: -8px;
            }
 
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
 
<h2>Dialog</h2>
 
<p><a href="#" id="lk_1" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 1</a></p>
<br>
<p><a href="#" id="lk_2" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 2</a></p>
<br>
<p><a href="#" id="lk_3" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 3</a></p>
<br>
<p><a href="#" id="lk_4" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 4</a></p>
<br>
<p><a href="#" id="lk_5" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 5</a></p>
 
<div title="Dialog Title 1" id="txt_1"  class="dialog">
<p>Lorem ipsum dolor sit amet,  Nulla nec tortor.
Donec id elit quis purus consectetur consequat. </p>
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet,
venenatis ornare, ultrices ut, nisi. Aliquam ante.
Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod,
vulputate ac, facilisis id, sem. Morbi in orci. </p>
</div>
 
<div title="Dialog Title 2" id="txt_2" class="dialog">
<p>Nulla purus lacus, pulvinar vel, malesuada ac,
mattis nec, quam. Nam molestie scelerisque quam.
Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur
adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede.
Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
</div>
 
<div title="Dialog Title 3" id="txt_3" class="dialog">
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare,
ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit.
Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam.
Nam molestie scelerisque quam. </p>
</div>
 
<div title="Dialog Title 4 " id="txt_4" class="dialog">
<p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit.
Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor.
Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor,
dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p>
</div>
 
<div title="Dialog Title 5" id="txt_5" class="dialog">
<p>Suspendisse scelerisque dui nec velit.
Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie
scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur
adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede.
Nulla nec tortor. Donec id elit quis purus consectetur consequat.
Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare,
ultrices ut, nisi. </p>
</div>
 
</body>
</html>